<template>
<div>
    <!-- 商品信息 -->
  <div class="container">
    <div class="body_box">
      <div class="img_box">
        <img :src="goodsDetail.pic_url" :alt="goodsDetail.pic_url" />
      </div>
      <p class="price">￥{{ (goodsDetail.price / 100).toFixed(2) }}</p>
      <div class="goods_name">{{ goodsDetail.name }}</div>
      <p class="brands">品牌商：{{ goodsDetail.brand }}</p>
      <div class="express_prompt">
        <span>
          库存：<span>{{ goodsDetail.stock }}</span>
        </span>
        <span>免邮费 顺丰快递</span>
      </div>
      <div class="detail">
        <p class="title">商品详情</p>
        <!-- v-html  解析我们的html代码 -->
        <p class="content" v-html="goodsDetail.detail_info">
        </p>
      </div>
    </div>
  </div>
  <!-- 底部 -->
  <van-action-bar>
    <van-action-bar-icon icon="cart-o" text="购物车" @click="router.push('/cart')" :badge='store.count'/>
    <van-action-bar-icon :icon="goodsDetail.collect>0? 'star':'star-o'" @click="collect" :text="goodsDetail.collect>0? '已收藏':'未收藏'" color="#ff5000" />
    <van-action-bar-button type="warning" text="加入购物车" @click="addCart"/>
    <van-action-bar-button type="danger" text="立即购买" @click="router.push(`/address-list?goodsId=${route.params.id}`)"/>
  </van-action-bar>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { getGoodsDetail } from "@/api/goods";
import { collecdAdd,collecdDelete } from "@/api/collect";
import { cartAdd,cartEdit } from "@/api/cart";
import { useRoute ,useRouter} from "vue-router";
import { showSuccessToast } from 'vant';
import useCartInfo from "@/stores/useCartInfo"
  
  let store=useCartInfo()

// 获取router实例
let route = useRoute();
let router = useRouter();

// 商品基本信息
let goodsDetail = ref({});

// 挂载完成 自动调接口 获取商品详情
onMounted(async () => {
  goodsDetail.value = (await getGoodsDetail({ id: route.params.id })).data;
  
});
let addCart=async ()=>{
  let data=store.list.find(item=>item.goods_id == route.params.id)
  if(data){
    await cartEdit({count:data.count+1,goods_id: route.params.id,id:data.id})
  }else{
    await cartAdd({count:1,goods_id: route.params.id})
  }
  showSuccessToast('添加购物车成功');
  store.getCartInfo()
}

let collect=async ()=>{
  if(goodsDetail.value.collect>0){
    await collecdDelete({type: "1",object_id: route.params.id})
    showSuccessToast('取消收藏成功');
    goodsDetail.value.collect=0
  }else{
    await collecdAdd({type: "1",object_id: route.params.id})
    showSuccessToast('收藏成功');
    goodsDetail.value.collect=1
  }
  
}
</script>

<style lang="scss" scoped>
// 内边距离
$pad: 8px;

.body_box {
  background-color: white;
  margin: 0 10px;
  .img_box {
    width: 100%;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .goods_name {
    padding: 0 $pad;
    background-color: white;
    font-size: 18px;
  }
  .brands,
  .express_prompt {
    padding: 0 $pad;
    display: flex;
    justify-content: space-between;
    color: #999999;
    font-size: 14px;
    margin: 6px 0;
  }
  .price {
    padding: 0 $pad;
    color: #f63515;
    font-size: 22px;
    margin: 6px 0;
  }
  .detail {
    .title {
      margin: 10px 0;
      font-weight: bold;
      font-size: 14px;
      color: black;
      text-align: center;
    }
    .content {
      padding: 0 12px;
      font-size: 16px;
      color: rgb(84, 84, 84);
      text-indent: 2em;
    }
  }
}
</style>
